<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>侦听器</title>
        <style>
            .wrapper { border: 1px solid blue; }
            .weight { display: flex; border: 1px solid gray; margin: 10px;}
            .weight>span { flex-basis: 50%; text-align: center; }
            .weight input { text-align: right;}
            .length { display: flex; border: 1px solid gray; margin: 10px;}
            .length>span { flex-basis: 50%; text-align: center; }
            .length input { text-align: right;}
            .time { display: flex; border: 1px solid gray; margin: 10px;}
            .time>span { flex-basis: 50%; text-align: center; }
            .time input { text-align: right;}
        </style>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first" v-cloak>
            <div class="wrapper">
                <div class="weight">
                    <span>
                        <input type="text" v-model="kilogram">千克
                    </span>
                    <span>
                        <input type="text" v-model="jin">斤
                    </span>
                </div>
                <div class="length">
                    <span>
                        <input type="text" v-model="length.meter">米
                    </span>
                    <span>
                        <input type="text" v-model="length.centimetre">公分
                    </span>
                </div>
                <div class="time">
                    <span>
                        <input type="text" v-model="time.hours">小时
                    </span>
                    <span>
                        <input type="text" v-model="time.shiChen">时辰
                    </span>
                </div>
            </div>
        </div>

        <a href="https://cn.vuejs.org/api/built-in-directives.html#v-bind">vue.js API: 内置指令(v-bind)</a>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        kilogram: '',
                        jin: '',
                        length: {
                            meter: 0,
                            centimetre: 0
                        },
                        time: {
                            hours: 0,
                            shiChen: 0
                        }
                    }
                },
                methods: {
                    meterChanged() {
                        console.log('meterChanged');
                        this.length.centimetre = this.length.meter * 100;
                    },
                    centimetreChanged() {
                        console.log('centimetreChanged');
                        this.length.meter = this.length.centimetre / 100;
                    }
                },
                // 侦听器
                watch: {
                    // 监听 kilogram 属性的变化
                    kilogram(){
                        console.log('watch kilogram');
                        this.jin = this.kilogram * 2 ;
                    },
                    jin(){
                        console.log('watch jin');
                        this.kilogram = this.jin / 2 ;
                    },
                    // 监听 meter 属性的变化并指定 meter 变化后调用的方法
                    'length.meter': 'meterChanged',
                    'length.centimetre': 'centimetreChanged'
                },
                // 生命周期钩子
                mounted() {
                    const self = this;
                    // 通过组件的 $watch 函数绑定侦听器
                    self.$watch( 'time.hours', value => {
                        console.log( value );
                        self.time.shiChen = value / 2 ;
                    });
                    self.$watch( 'time.shiChen', value => {
                        console.log( value );
                        self.time.hours = value * 2 ;
                    });
                }
            }

            Vue.createApp(options).mount( '#first' );
        </script>
    </div>
</html>